<template>
	<a-card>
		<a-row type="flex" align="left" :gutter="[16, 16]">
			<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
				<a-form ref="formRef" name="custom-validation" :model="formState" layout="inline" @finish="handleFinish"
					@finishFailed="handleFinishFailed">
					<a-row :gutter="[16, 16]" style="width:100%">
						<a-col :xs="24" :sm="24" :md="24" :xl="8">
							<a-form-item has-feedback label="资讯名称" name="title">
								<a-input v-model:value="formState.title" placeholder="请输入商品名称" autocomplete="off" allowClear />
							</a-form-item>
						</a-col>
						<a-col :xs="24" :sm="24" :md="24" :xl="8">
							<a-form-item has-feedback label="时间" name="datetime">
								<a-range-picker v-model:value="formState.datetime" show-time format="YYYY-MM-DD HH:mm:ss" />
							</a-form-item>
						</a-col>

						<!-- <a-col :xs="24" :sm="24" :md="24"  :xl="6">
							<a-form-item has-feedback label="状态" name="status">
								<a-select v-model:value="formState.status" placeholder="请选择状态">
									<a-select-option value="0">未上架</a-select-option>
									<a-select-option value="1">上架</a-select-option>
								</a-select>
							</a-form-item>
						</a-col> -->
						<a-col :xs="24" :sm="24" :md="24" :xl="6">
							<a-form-item :wrapper-col="{ offset: 1, span: 14 }">
								<a-space>
									<a-button type="primary" html-type="submit">查询</a-button>
									<a-button @click="resetForm">重置</a-button>
								</a-space>
							</a-form-item>
						</a-col>
					</a-row>
				</a-form>
			</a-col>
			<a-col :span="24">
				<a-space>
					<a-button type="primary" @click="addAccount">
						<template #icon>
							<PlusOutlined />
						</template>
						新增
					</a-button>

					<a-button type="danger" :disabled="!selectedlist.length" @click="delectAll">
						<template #icon>
							<DeleteOutlined />
						</template>
						批量删除
					</a-button>
				</a-space>
			</a-col>
			<a-col :span="24">
				<a-table :columns="columns" :dataSource="dataSource" :pagination="pagination" :row-selection="rowSelection"
					@change="handleTableChange" :rowKey="
						(record, index) => {
							return record.id
						}
					" :scroll="{ x: 'calc(700px + 50%)' }">
					<template #status="{ record }">
						<SWITCH :status="record.status == 0 ? false : true" :data="record" @changeSwitch="changeSwitch" />
					</template>
					<template #pic="{ record }">
						<a-avatar shape="square" size="large" :src="record.cover">
						</a-avatar>
					</template>
					<template #operate="{ record }">
						<a-space size="0">
							<a-button type="link" block @click="handleEdit(record)">编辑</a-button>
							<a-popconfirm title="是否确定删除？" ok-text="是" cancel-text="否" @confirm="handelDelet([record.id])">
								<a-button type="link" danger>删除</a-button>
							</a-popconfirm>
						</a-space>
					</template>
				</a-table>
			</a-col>
		</a-row>
		<GOODSMODEL v-if="visible" :visible="visible" :model="model" :title="title" @close-modal="handleCancel"
			@ok="handleOk" />
	</a-card>
</template>
<script>

import {
	defineComponent,
	reactive,
	ref,
	computed,
	onMounted,
	getCurrentInstance,
	createVNode
} from 'vue'
import { useStore } from 'vuex'
import {
	searchNews,
	updateProductStatus,
	addNews,
	addGoodsByGet,
	updateNews,
	delNews,

} from '/@/api'
import { message, Modal } from 'ant-design-vue'
import {
	PlusOutlined,
	DeleteOutlined,
	ExclamationCircleOutlined
} from '@ant-design/icons-vue'
import { SWITCH } from '/@/components'
import GOODSMODEL from './modules/goodsmodel.vue'
const columns = [
	// {
	// 	title: 'ID',
	// 	dataIndex: 'id',
	// 	key: 'id',
	// 	align: 'center',
	// 	width: "80px"
	// },
	{
		title: '资讯名称',
		dataIndex: 'title',
		key: 'title',
		align: 'center',
		width: 100
	},
	{
		title: '资讯图片',
		dataIndex: 'images',
		key: 'images',
		slots: {
			customRender: 'pic'
		},
		align: 'center',
		width: 100
	},
	{
		title: '更新时间',
		dataIndex: 'create_time',
		key: 'create_time',

		align: 'center',
		width: 200
	},



	{
		title: '操作',
		fixed: 'right',
		width: 200,
		dataIndex: 'operate',
		key: 'operate',
		slots: { customRender: 'operate' },
		align: 'center'
	}
]

export default defineComponent({
	components: {
		SWITCH,
		PlusOutlined,
		DeleteOutlined,
		GOODSMODEL
	},
	setup() {
		const store = useStore()
		const model = ref({})
		const dataSource = ref([])
		const { proxy } = getCurrentInstance()
		const showUrl = ref('')
		const editableData = reactive({})
		const value = ref(null)
		const loading = ref(false)
		const current = ref(1)
		const pageSize = ref(10)
		const total = ref(0)
		const title = ref('')
		const visible = ref(false)
		const selectedlist = ref([])
		const catelist = ref([])
		const ablumlist = ref([])
		const pagination = computed(() => ({
			current: current.value * 1,
			pageSize: pageSize.value * 1,
			'show-size-changer': false,
			pageSizeOptions: ['10', '20', '50'],
			total: total //总条数
		}))
		const formRef = ref()
		const formState = reactive({
			datetime: []
		})

		const layout = {
			labelCol: {
				style: {
					width: '64px',
					float: 'left',
					textAlign: 'center'
				}
			},
			wrapperCol: {
				span: 20
			}
		}
		const handleCancel = () => {
			visible.value = false
		}
		const handleFinish = (values) => {
			current.value = 1
			refalsh()
		}

		const handleFinishFailed = (errors) => {
			console.log(errors)
		}
		const handelDelet = (n) => {
			delNews(n)
				.then((res) => {
					message.success('删除成功')
					refalsh()
				})
				.catch(() => { })
		}
		const resetForm = () => {
			formState.title = ''
			formState.status = undefined
			formState.goods_cate_id = undefined
			formState.goods_album_id = undefined
			formState.goods_no = ''
			formState.datetime = []
			formState.goods_type = undefined
			getsearchNews({
				page: 1,
				pagesize: pageSize.value
			})
		}
		const addAccount = () => {
			visible.value = true
			model.value.edit = false
			title.value = '新增资讯'
		}
		const handleEdit = (n) => {
			visible.value = true
			model.value = n
			model.value.edit = true
			title.value = '编辑资讯'
			console.log(model.value)
		}
		const handleTableChange = (page, filters, sorter) => {
			const { current: pagenum, pageSize: pagesize } = page
			current.value = pagenum * 1
			pageSize.value = pagesize * 1
			refalsh()
		}

		const getsearchNews = (params) => {
			searchNews(params)
				.then((res) => {
					const {
						code,
						message,
						result: { list, count, show_url }
					} = res

					dataSource.value = list
					total.value = count
				})
				.catch(() => { })
		}

		const handleOk = (n) => {
			const {
				values: {
					cover,
					author,
					content,
					title
				},
				model: { edit, id }
			} = n

			var params = {

			}

			params.cover = cover
			params.author = author
			params.content = content
			params.title = title
			if (!edit) {
				// 新增
				addNews(params)
					.then((res) => {
						message.success('新增成功')
						visible.value = false
						refalsh()
					})
					.catch(() => { })
			} else {
				params.id = id
				updateNews(params)
					.then((res) => {
						message.success('编辑成功')
						visible.value = false
						refalsh()
					})
					.catch(() => { })
			}
		}
		const changeSwitch = (n) => {
			const {
				data: { id },
				status
			} = n
			updateProductStatus({
				id,
				status: status ? 1 : 0
			})
				.then((res) => {
					message.success('状态修改成功')
					refalsh()
				})
				.catch(() => { })
		}
		const refalsh = () => {
			getsearchNews({
				title: formState.title,
				startcreatetime:
					formState.datetime[0] && proxy.$formate(formState.datetime[0]._d),
				endcreatetime:
					formState.datetime[0] && proxy.$formate(formState.datetime[1]._d),
				page: current.value * 1,
				pagesize: pageSize.value * 1,

			})
		}
		const rowSelection = ref({
			checkStrictly: false,
			onChange: (selectedRowKeys, selectedRows) => {
				console.log(
					`selectedRowKeys: ${selectedRowKeys}`,
					'selectedRows: ',
					selectedRows
				)
			},
			onSelect: (record, selected, selectedRows) => {
				selectedlist.value = selectedRows
			},
			onSelectAll: (selected, selectedRows, changeRows) => {
				if (selected) {
					selectedlist.value = selectedRows
				} else {
					selectedlist.value = []
				}
			}
		})
		const delectAll = () => {
			Modal.confirm({
				title: '是否确定删除?',
				icon: () => createVNode(ExclamationCircleOutlined),

				okText: '是的',
				okType: 'danger',
				cancelText: '取消',

				onOk() {
					var ids = []
					selectedlist.value.length &&
						selectedlist.value.map((item) => {
							ids.push(item.id)
						})
					handelDelet(ids)
				},

				onCancel() {
					console.log('Cancel')
				}
			})
		}
		const changecate = (id) => {
			addGoodsByGet(id).then((res) => {
				const {
					result: { list }
				} = res
				ablumlist.value = list
			})
		}
		onMounted(() => {

			refalsh()
		})
		return {
			formState,
			formRef,
			layout,
			visible,
			title,
			model,
			showUrl,
			addAccount,
			handelDelet,
			handleFinishFailed,
			handleFinish,
			resetForm,
			dataSource,
			pagination,
			value,
			total,
			loading,
			current,
			pageSize,
			columns,
			editingKey: '',
			editableData,
			handleTableChange,
			getsearchNews,
			changeSwitch,
			handleCancel,
			handleOk,
			refalsh,
			rowSelection,
			handleEdit,
			selectedlist,
			delectAll,
			changecate,
			catelist,
			ablumlist
		}
	}
})
</script>
<style scoped>
.editable-row-operations a {
	margin-right: 8px;
}

>>>.ant-calendar-picker {
	width: 100% !important
}
</style>